<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DW登录页面</title>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/login.css">
  </head>
  <body>
    <div class="head">
      <h3>D A N I E L&nbsp;&nbsp;&nbsp;W E L L I N G T O N</h3>
      </div>
      <div class="nav">
        <ul>
          <li>会员活动</li>
          <li>手表</li>
          <li>配饰</li>
          <li>礼品套装</li>
          <li>表带</li>
        </ul>
      </div>
      <div class="image">
        <img src="../img/login_banner.jpg" alt="">
      </div>
      <div class="loginBox">
        <label for=""> 姓名:</label
        ><input type="text" class="ipts" onchange="userNameHandle(this)" />
        <span></span>
        <br />
        <!-- 这里的this就是指的是这个iput文本输入框 -->
        <label for=""> 密码:</label><input type="password" class="ipts" />
        <span></span>
        <br />
        <input type="button" value="立即登录" id="btn" onclick="resSubmit()" />
      </div>
      <div class="foot">
        <ul>
          <li>使用条款</li>
          <li>隐私保护政策</li>
          <li>防伪声明</li>
          <li>网站地图</li>
        </ul>
        <div class="foot1">
          <ul>
            <li>粤公网安备44030502000796 </li>
            <li>粤ICP备15098750 </li>
            <li>营业执照</li>
          </ul>
        </div>
        <p>ALL RIGHTS RESERVED. COPYRIGHT  © 丹尼尔惠灵顿贸易（深圳）有限公司</p>
      </div>
    <script>
          let ipts = document.querySelectorAll("input");
          let isUsername = false;
          let isPassword = false;
          ipts[0].onchange = function () {
            let username = ipts[0].value;
            let reg = /^[\w\W]{3,10}$/;
            if (reg.test(username)) {
              ipts[0].nextElementSibling.innerHTML = "用户格式正确";
              ipts[0].nextElementSibling.style.color = "green";
              isUsername = true;
            } else {
              ipts[0].nextElementSibling.innerHTML = "用户格式不正确";
              ipts[0].nextElementSibling.style.color = "red";
              isUsername = false;
            }
          };
          ipts[1].onchange = function () {
            let password = ipts[1].value;
            let reg1 = /^\d{1,6}$/;
            if (reg1.test(password)) {
              ipts[1].nextElementSibling.innerHTML = "密码格式正确";
              ipts[1].nextElementSibling.style.color = "green";
              isPassword = true;
            } else {
              ipts[1].nextElementSibling.innerHTML = "密码格式不正确";
              ipts[1].nextElementSibling.style.color = "red";
              isPassword = false;
            }
          };
          ipts[2].onclick = function () {
            //  接口地址：http://jx.xuzhixiang.top/ap/api/login.php
            //  接口请求方式：get
            //  接口参数：
            //       username用户名
            //       password密码
            //  使用方式
            //       http://jx.xuzhixiang.top/ap/api/login.php?username=11&password=1212
            //  服务器返回json数据
            if (isUsername && isPassword) {
              let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";
              let ipts = document.querySelectorAll("input");
              let username = ipts[0].value;
              let password = ipts[1].value;
              axios.get(loginAPI, {params:
                {
                    username: username,
                    password: password,
                  },
                })
                .then(function (res) {
                 console.log(res.data);
                 alert(res.data.msg);
                //   location.href = "首页.html";
              if (res.data.code == 1) {
      // 用户id
      //  uid--一般时候登录的时候返回的数据-，登录页登录请求成功以后的获取uid，怎么在首页中登录页那个uid
      console.log(res.data.data.id);
      localStorage.setItem("id", res.data.data.id);
      // 3-2
      // token 是加密以后的密码-- 把他给服务器，服务器就知道你是谁，登录权限===身份令牌
      localStorage.setItem("token", res.data.data.token);
      location.href = "index.html";
                }
                else{
               alert(res.data.msg);
            }
            });
          }
        }
    </script>
  </body>
</html>
